<template>
    <div class="container">
        <div class="inner">
            <img src="http://picsum.photos/id/51/600" alt="" srcset="">
            <img src="http://picsum.photos/id/52/600" alt="" srcset="">
            <img src="http://picsum.photos/id/53/600" alt="" srcset="">
            <img src="http://picsum.photos/id/54/600" alt="" srcset="">
            <img src="http://picsum.photos/id/55/600" alt="" srcset="">
            <img src="http://picsum.photos/id/56/600" alt="" srcset="">
        </div>
    </div>
</template>
<script >

</script>

<style lang="scss">
@use "sass:math";
$size: 200px; //大小
$n: 6;
$pDeg: 360deg/$n; //每个扇形的角度
$r: $size / 2;
$R: $size / math.sin($pDeg / 2);
$innserSize: $r * 2;

body {
    background-color: #000;
}

.container {
    width: $size;
    height: $size;
    border-radius: 50%;
    outline: 5px solid #fff;
    margin: 50px auto;
}

.inner {
    width: $innserSize;
    height: $innserSize;
    background: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: $r;
    position: relative;

    img {
        width: $size;
        height: $size;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        margin-left: $r;
    }
}
</style>